<template>
  <div>
    <!-- {{ modelValueChildren }}
    {{ modelValue }} -->
    <el-select
      v-model="modelValueChildren"
      filterable
      :placeholder="placeholder"
      @change="selectChange"
    >
      <el-option
        v-for="item in options"
        :key="item.key"
        :label="item.value"
        :value="item.key"
      />
    </el-select>
  </div>
</template>

<script setup lang="ts">
import { getSelectDictionary } from "@/api/public.ts";
const emits = defineEmits(["update:modelValue"]);
const props = defineProps({
  // 传给接口的参数，要求内容：{category：10枚举获取下拉列表||20数据库获取，boxName:'fooenum'}
  selectObj: {
    defalut: {},
    type: Object,
  },
  modelValue: {
    type: String,
    default: "",
  },
  placeholder: {
    type: String,
    default: "请选择",
  },
});
const modelValueChildren = ref(props.modelValue);
watch(
  () => props.modelValue,
  (val, oldValue) => {
    modelValueChildren.value = val;
  }
);
const options = ref([]);

const selectChange = (val) => {
  emits("update:modelValue", val);
};
onMounted(() => {
  getSelectDictionary(props.selectObj).then((res) => {
    if (res.cd === "2000") {
      options.value = res.dt;
    }
  });
});
</script>

<style scoped lang="scss"></style>
